<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* <!-- 步骤二：准备一个具体大小的DOM容器------------> */
      #main {
        width: 800px;
        height: 800px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
    <!-- 步骤一： 下载并引入echarts.js文件 ----------------->
    <script src="./lib/echarts.min.js"></script>
    <script>
      // <!-- 步骤三：初始化echarts实例对象--------------------->
      var myChart = echarts.init(document.getElementById('main'))
      // <!-- 步骤四：制定配置和数据（option）---------------->
      var option = {
        // 标题部分的设置
        title: {
          text: '2021全学科薪资走势',
          top: '2%',
          left: '3%',
        },
        // 图表
        grid: {
          // 设置上下左右的间隙
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '10%',
        },
        // x轴的设置
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', 'Sat', 'Sun'], // 箭头行数 一行代码 省略 {} return
          // x轴线段设置
          axisLine: {
            // 线段的样式
            lineStyle: {
              // 类型 虚线
              type: 'dashed',
              // 颜色
              color: '#d3d3d3',
            },
          },
          // x轴文本设置
          axisLabel: {
            // 颜色
            color: 'black',
          },
        },
        // y轴的设置
        yAxis: {
          type: 'value',
          // 分割线
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed', // 类型
              // width:20, // 宽度
              color: 'deepskyblue', // 颜色
            },
          },
        },
        color: ['#5f8eff'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true,
        },
        series: [
          {
            data: [1546, 1942, 1291, 1934, 1120, 1130, 1120],
            type: 'line',
            // 圆圈
            smooth: true,
            // 圆圈大小
            symbolSize: 10,
            // 线宽
            lineStyle: {
              width: 8,
            },
            // 区域颜色
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#aed4ff', // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#ffffff', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      // <!-- 步骤五：将配置项设置给echarts实例对象 -->
      myChart.setOption(option)
    </script>
  </body>
</html>
